<template>
    <div class="box">
      <div class="nav">
        <router-link to="/shcont">
          <img src="../../assets/lyl/image/tuijian/BMQD-1.png" alt="">
        </router-link>
        <p>确认订单</p>
      </div>
      <div class="adss">
        <img src="/static/lyl/huasexian.png" alt="">
        <div class="sanji">
          <img @click="isss()" src="/static/lyl/jiahao.png" alt="">
          <span>添加收货地址</span>
          <select-city v-if="bol1" v-model="cityInfo" class="select-city" @input="chooseAddress"></select-city>
        </div>
        <img src="/static/lyl/huasexian.png" alt="">
      </div>
      <div class="write">{{bol1?cityName:'请添加收货地址'}}</div>
      <div class="disable">
        <div class="biao">海外直邮订单</div>
        <div class="zhong">
          <img src="/static/lyl/erge.png" alt="">
          <div class="rig">
            <p>会呼吸丝滑蜜粉</p>
            <p>规格：蜜粉</p>
            <p>综合税：0.2%</p>
            <div>
              <span>￥166.06</span>
              <span>×1件</span>
            </div>
          </div>
        </div>
        <div class="showcont">
          <p v-if="hide">显示另外1件（共2件）<img @click="xiala()" src="/static/lyl/xiala.png" alt=""></p>
          <div v-if="isShow" class="zhong">
            <img src="/static/lyl/erge.png" alt="">
            <div class="rig">
              <p>会呼吸丝滑蜜粉</p>
              <p>规格：蜜粉</p>
              <p>综合税：0.2%</p>
              <div>
                <span>￥166.06</span>
                <span>×1件</span>
              </div>
            </div>
          </div>
          <p v-if="shou">点击收起 <img @click="shouqi()" src="/static/lyl/shouqi.png" alt=""></p>
        </div>
      </div>
      <div class="money">
        <ul>
          <li v-for="item in data2">
            <span>{{item.txt2}}</span>
            <span>{{item.pice}}</span>
          </li>
        </ul>
        <div class="zhu">
          <p><span>安全提醒：</span>付款成功后，阿拉灯不会以付款异常、卡单、系统 升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成 钱款的损失。如有疑问请咨询客服，谨防电话诈骗！</p>
        </div>
      </div>
      <div class="pei">
        <span>配送方式：</span>
        <span>日本直邮</span>
      </div>
      <div class="footer">
        <div class="hui">
          <span>共2件商品</span>
          <span>应付：<span>￥392.12</span></span>
        </div>
        <div class="anniu">
          <div @click="can()" :class="{active:cur==true}" class="true">
            <img src="/static/lyl/feblei-20.png" alt="">
          </div>
          <p>本人同意并接受 <span>《个人委托协议》</span>和 <span>《用户协议》</span></p>
        </div>
        <router-link to="/dixiang">
          <button :disabled="curs">确认</button>
        </router-link>
      </div>
    </div>
</template>

<script>
  import SelectCity from './SelectCity'
    export default {
      name: "Quedi",
      data(){
        return {
          bol1:false,
          hide:true,
          isShow:false,
          shou:false,
          cur:false,
          curs:true,
          data2:[
            {txt2:'商品金额：',pice:'￥332.12'},
            {txt2:'订单邮费：',pice:'￥50.00'},
            {txt2:'关税：',pice:'￥10'},
            {txt2:'订单金额：',pice:'￥392.12'},
          ],
          cityInfo:{
            province:'河南省',
            city:'郑州市',
            block:'高新区'
          }
        }
      },
      methods:{
        xiala(){
          this.hide = false;
          this.isShow = true;
          this.shou = true;
        },
        shouqi(){
          this.hide = true;
          this.isShow = false;
          this.shou = false;
        },
        can(){
          this.cur = !this.cur;
          if (this.cur) {
            this.curs = false;
          }else{
            this.curs = true;
          }
        },
        isss(){
          this.bol1 = !this.bol1
        },
        // info 为子组件传递过来的参数
        chooseAddress (info) {
          this.cityInfo = info;

          console.log(this.cityInfo);

        },
      },
      components:{
        SelectCity
      },
      computed: {
        //cityName 为选择的省市区名称
        cityName() {
          const names = [];
          this.cityInfo.province && (this.cityInfo.province.name!=undefined&&names.push(this.cityInfo.province.name + ' '));
          this.cityInfo.city && (this.cityInfo.city.name!=undefined&&names.push(this.cityInfo.city.name + ' '));
          this.cityInfo.block && (this.cityInfo.block.name!=undefined&&names.push(this.cityInfo.block.name + ' '));
          return names.join('');
        }
      }
    }
</script>

<style scoped>
  .box{
    padding-top: 12rem;
    background: #f2f2f2;
  }
  .nav{
    position: fixed;
    top: 0;
    opacity: 0.8;
    width: 100%;
    background: #e53e42;
    padding: 3.5rem 0;
    display: flex;
    justify-content: center;
  }
  .nav a{
    position: absolute;
    left: 2rem;
    color: #fff;
    font-size: 34px;
  }
  .nav p{
    font-size: 34px;
    color:#fff;
  }
  .adss{
    background: #fff;
  }
  .adss>img{
    width: 100%;
  }
  .adss .sanji{
    padding: 2.6rem 0 2.6rem 2rem;
    display: flex;
  }
  .adss .sanji img{
    height: 4.8rem;
  }
  .adss .sanji span{
    font-size: 2.8rem;
    align-self: center;
    margin-left: 2.5rem;
  }
  .write{
    height: 12rem;
    background: url("/static/lyl/bei.png") no-repeat #fff center/cover;
    margin: 2rem 0;
    padding: 2rem;
    font-size: 30px;
  }
  .disable{
    background: #fff;
  }
  .disable .biao{
    padding: 2.4rem 0 2.4rem 2rem;
    font-size: 2.8rem;
    line-height: 3.6rem;
    border-bottom: 1px solid #ccc;
  }
  .disable .zhong{
    border-bottom: 1px solid #ccc;
    padding: 3.2rem 0 2rem 6.6rem;
    display: flex;
    margin-bottom: 2rem;
  }
  .disable .zhong img{
    width: 12.4rem;
    height: 10.5rem;
    margin-right: 2.6rem;
    align-self: center;
  }
  .disable .zhong .rig p:nth-child(1){
    font-size: 2.8rem;
    line-height: 3.2rem;
    margin-bottom: 2.2rem;
  }
  .disable .zhong .rig p:nth-child(2){
    font-size: 2.4rem;
    line-height: 3.2rem;
  }
  .disable .zhong .rig p:nth-child(3){
    font-size: 2.4rem;
    line-height: 3.2rem;
    margin-bottom: 2.2rem;
  }
  .disable .zhong .rig div span:nth-child(1){
    font-size: 2.4rem;
    line-height: 3.2rem;
    margin-right: 3.5rem;
    color: #e53e42;
  }
  .disable .zhong .rig div span:nth-child(2){
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
  .disable .showcont{
    text-align: center;
    padding: 2rem 0;
  }
  .disable .showcont p{
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
  .disable .showcont p img{
    width: 2.5rem;
    vertical-align: middle;
  }
  .money{
    margin-top: 2rem;
    background: #fff;
  }
  .money ul li{
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    border-bottom: 1px solid #ccc;
  }
  .money ul li span{
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
  .money ul li span:nth-child(2){
    color: #e53e42;
  }
  .money .zhu{
    padding: 2rem;
  }
  .money .zhu p{
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
  .money .zhu p span{
    font-size: 3rem;
    color: #e53e42;
  }
  .pei{
    background: #fff;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    margin: 2rem 0 7.8rem 0;
  }
  .pei span{
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
  .footer{
    background: #fff;
    padding-bottom: 2rem;
    text-align: center;
  }
  .footer .hui{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
  }
  .footer .hui span{
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
  .footer .hui span>span{
    color: #e53e42;
  }
  .footer .anniu{
    padding: 3.5rem 2rem;
    display: flex;
  }
  .footer .anniu .true{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    text-align: center;
    line-height: 3rem;
    background: #ccc;
  }
  .footer .anniu .active{
    background: #e53e42;
  }
  .footer .anniu p{
    font-size: 2.8rem;
    line-height: 3.2rem;
    margin-left: 1rem;
  }
  .footer .anniu p span{
    color:#e53e42;
  }
  button{
    width: 68rem;
    background: #e53e42;
    height: 4rem;
    border-radius: 2rem;
    font-size: 2.8rem;
    line-height: 3.2rem;
    color: #fff;
  }
</style>
